<template>
  <div>
    <div id="iconBar" ref="iconBar" style="height:300px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'IconBar',
  props: {
    chartData: Object
  },
  data () {
    return {
      mychart: {},
      option: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  watch: {
    chartData (newval, oldVal) {
      this.option.title.text = newval.name
      this.option.series[0].data[0].value = newval.value
      this.option.series[0].data[0].label.formatter = () => newval.value
      this.mychart.setOption(this.option)
    }
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.iconBar)
      var data = this.chartData.value // 数值大小
      var max = 500 // 满刻度大小
      this.option = {
        backgroundColor: 'rgb(12,16,61)',
        title: {
          text: this.chartData.name,
          top: '55%',
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        color: ['#fff', '#fff', 'rgba(255,255,255,.2)'],
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['75%', '80%'],
            hoverAnimation: false,
            data: [
              // 内部文字
              {
                name: '',
                value: data,
                label: {
                  show: true,
                  position: 'center',
                  color: 'rgb(27,207,227)',
                  fontSize: 38,
                  fontWeight: 'bold',
                  formatter () {
                    return data
                  }
                },
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#99da69' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#01babc' // 100% 处的颜色
                        }
                      ],
                      globalCoord: false // 缺省为 false
                    }
                  }
                }
              },
              // 小圆点
              {
                // 画中间的图标
                name: '',
                value: 0,
                label: {
                  position: 'inside',
                  backgroundColor: {
                    image:
                      ''
                  },
                  width: 20,
                  height: 20,
                  borderRadius: 30,
                  padding: 20
                }
              },
              // 缺省的圆
              {
                // 画剩余的刻度圆环
                name: '',
                value: max - data,
                label: {
                  show: false
                },
                itemStyle: {
                  color: 'rgb(0,0,0)'
                },
                labelLine: {
                  show: false
                }
              }
            ]
          }
        ]
      }
      this.mychart.setOption(this.option)
    }
  }
}
</script>

<style lang="less" scoped></style>
